<template>
    <div class="u-p-20">
        <el-card shadow="never">
            <div slot="header">
                <b class="u-f-16">回收站列表</b>
            </div>
            <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
                <el-form-item label="关键词">
                    <el-input v-model="queryForm.keyword" placeholder="输入模型名称查询" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
                </el-form-item>
            </el-form>

            <div class="u-mt-20 u-clearfix">
                <div class="u-left">
                    <el-dropdown>
                        <el-button size="mini">
                            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleBackData" v-if="hasPerm('recycle/back')">还原</el-dropdown-item>
                            <el-dropdown-item @click.native="handleDelData" v-if="hasPerm('recycle/del')">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="u-right">
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelAll" v-if="hasPerm('recycle/del')">一键清空</el-button>
                    <el-button type="success" size="mini" icon="el-icon-check" @click="handleBackAll" v-if="hasPerm('recycle/back')">一键还原</el-button>
                </div>
            </div>

            <el-table :data="tableData" @selection-change="handleSelectionChange" class="u-mt-20 u-w-block">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="序号" type="index" :index="getIndexNo" width="100"></el-table-column>
                <el-table-column label="模型名称" prop="model_name"></el-table-column>
                <el-table-column label="主键值" prop="primary_key"></el-table-column>
                <el-table-column label="描述" prop="desc"></el-table-column>
                <el-table-column label="删除日期" prop="create_time"></el-table-column>
            </el-table>

            <div class="u-mt-20 u-text-center">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 30, 40,50]"
                        :page-size="limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    import commonPage from '@/mixins/common-page'

    export default {
        mixins:[commonPage],
        data() {
            return {
                apiName:'sysRecycle',
                queryForm:{
                    keyword:''
                },
                multipleSelection: []
            }
        },
        methods: {
            handleSelectionChange(val) {
                let selArr = []
                val.forEach(function(value){
                    selArr.push(value['id'])
                })
                this.multipleSelection = selArr
            },
            handleBackData(){
                if(this.multipleSelection.length>0){
                    this.$confirm('确认批量还原选中数据吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$api.sysRecycle.back(this.multipleSelection).then(response => {
                            if(response.code==1){
                                this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                })
                                this.getPageData()
                            }
                        })
                    }).catch((err)=>{
                        window.console.log(err)
                    })
                }else{
                    this.$message.error('请选择数据')
                }
            },
            handleDelData(){
                if(this.multipleSelection.length>0){
                    this.$confirm('确认批量删除选中数据吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$api.sysRecycle.del(this.multipleSelection).then(response => {
                            if(response.code==1){
                                this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                })
                                this.getPageData()
                            }
                        })
                    }).catch((err)=>{
                        window.console.log(err)
                    })
                }else{
                    this.$message.error('请选择数据')
                }
            },
            handleBackAll(){
                this.$confirm('确定还原所有回收站数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.sysRecycle.back().then(response => {
                        if(response.code==1){
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            })
                            this.getPageData()
                        }
                    })
                }).catch((err)=>{
                    window.console.log(err)
                })
            },
            handleDelAll(){
                this.$confirm('确定清空所有回收站数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.sysRecycle.del().then(response => {
                        if(response.code==1){
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            })
                            this.getPageData()
                        }
                    })
                }).catch((err)=>{
                    window.console.log(err)
                })
            }
        }
    }
</script>